<template>
	<div class="!overflow-y-auto layout-padding">
		<el-collapse v-model="activeNames">
			<el-collapse-item name="1">
				<template #title>
					<span class="pl-4 text-lg font-semibold text-primary">报警弹窗设备范围设置(设置后需重新登录方可生效)</span>
				</template>
				<div class="px-6">
					<el-form :model="form.alarmPop" v-loading="loading" label-width="140px" class="mb20">
						<el-form-item label="请选择修改范围：" prop="alarmPopRange">
							<el-radio-group v-model="form.alarmPop.alarmPopRange">
								<el-radio :label="10">仅限本级设备</el-radio>
								<el-radio :label="20">包含所有下级设备</el-radio>
								<el-radio :label="30">所有报警不弹窗</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-form>
					<div class="flex justify-center">
						<el-button type="primary" @click="submit(form.alarmPop)">保存</el-button>
					</div>
				</div>
			</el-collapse-item>
			<el-collapse-item name="2">
				<template #title>
					<span class="pl-4 text-lg font-semibold text-primary">地图显示设置（拖动以下地图选择范围）</span>
				</template>
				<div class="px-6">
					<el-form :model="form.mapMode" v-loading="loading" label-width="140px">
						<el-row :gutter="20">
							<el-col :span="24" class="mb20">
								<el-form-item label="模式选择：" prop="mapModeSelection">
									<el-radio-group v-model="form.mapMode.mapModeSelection">
										<el-radio :label="10">全景（中国地图）</el-radio>
										<el-radio :label="20">浏览器所在位置为中心</el-radio>
										<el-radio :label="30">自定义地图范围</el-radio>
									</el-radio-group>
								</el-form-item>
							</el-col>
							<el-col :span="12" class="mb20" v-if="form.mapMode.mapModeSelection === 30">
								<el-form-item label="地图中心点经度：" prop="centerPointLongitude">
									<el-input v-model="form.mapMode.centerPointLongitude" placeholder="请输入经度" />
								</el-form-item>
							</el-col>
							<el-col :span="12" class="mb20" v-if="form.mapMode.mapModeSelection === 30">
								<el-form-item label="地图中心点纬度：" prop="centerPointLatitude">
									<el-input v-model="form.mapMode.centerPointLatitude" placeholder="请输入纬度" />
								</el-form-item>
							</el-col>
							<el-col :span="12" class="mb20" v-if="form.mapMode.mapModeSelection !== 10">
								<el-form-item label="缩放级别：" prop="mapLevel">
									<el-input v-model="form.mapMode.mapLevel" placeholder="请输入缩放级别" />
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
					<div class="h-[450px] w-[700px] mb20 mx-auto">
						<BMap :zoom="4" @mapZoomAndCenter="handleMapZoomAndCenter" />
					</div>
					<div class="flex justify-center">
						<el-button type="primary" @click="submit(form.mapMode)">保存</el-button>
					</div>
				</div>
			</el-collapse-item>
			<el-collapse-item name="3">
				<template #title>
					<span class="pl-4 text-lg font-semibold text-primary">地图安装点名称显示设置</span>
				</template>
				<div class="px-6">
					<el-form :model="form.placeFormat" v-loading="loading" label-width="140px" class="mb20">
						<el-form-item label="显示格式：" prop="userClustersPlaceFormat">
							<el-checkbox-group v-model="form.placeFormat.userClustersPlaceFormat">
								<el-checkbox label="10"> 建筑物名称 </el-checkbox>
								<el-checkbox label="20"> 楼层名称 </el-checkbox>
								<el-checkbox label="30"> 安装点名称 </el-checkbox>
							</el-checkbox-group>
						</el-form-item>
					</el-form>
					<div class="flex justify-center">
						<el-button type="primary" @click="submit(form.placeFormat, 'userClustersPlaceFormat')">保存</el-button>
					</div>
				</div>
			</el-collapse-item>
			<el-collapse-item name="4">
				<template #title>
					<span class="pl-4 text-lg font-semibold text-primary">地图放大至单个建筑物时名称显示格式</span>
				</template>
				<div class="px-6">
					<el-form :model="form.placeBuilding" v-loading="loading" label-width="140px" class="mb20">
						<el-form-item label="显示格式：" prop="userClustersPlaceBuilding">
							<el-checkbox v-model="form.placeBuilding.userClustersPlaceBuilding" true-label="20" false-label="10"> 建筑物名称 </el-checkbox>
						</el-form-item>
					</el-form>
					<div class="flex justify-center">
						<el-button type="primary" @click="submit(form.placeBuilding)">保存</el-button>
					</div>
				</div>
			</el-collapse-item>
			<el-collapse-item name="5">
				<template #title>
					<span class="pl-4 text-lg font-semibold text-primary">账号登录是否开启验证码安全验证</span>
				</template>
				<div class="px-6">
					<el-form :model="form.login" v-loading="loading" label-width="140px" class="mb20">
						<div class="px-[140px] mb20">
							<el-alert type="warning" show-icon :closable="false">
								<span>真实有效手机号可自选，非真实手机号请勿开启，否则将无法登录；</span>
							</el-alert>
						</div>
						<el-form-item label="状态：" prop="loginVerificationCode">
							<el-switch
								v-model="form.login.loginVerificationCode"
								inline-prompt
								active-text="开启"
								inactive-text="关闭"
								:active-value="20"
								:inactive-value="10"
							/>
						</el-form-item>
					</el-form>
					<div class="flex justify-center">
						<el-button type="primary" @click="submit(form.login)">保存</el-button>
					</div>
				</div>
			</el-collapse-item>
			<el-collapse-item name="6">
				<template #title>
					<span class="pl-4 text-lg font-semibold text-primary">平台登录有效时间（无操作自动退出登录）</span>
				</template>
				<div class="px-6">
					<el-form :inline="true" :model="form.loginValidity" v-loading="loading" label-width="140px" class="mb20">
						<el-form-item label="选择时间：" prop="loginValidityPeriod">
							<el-select class="!w-[240px]" clearable v-model="form.loginValidity.loginValidityPeriod">
								<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in loginValidityOptions" />
							</el-select>
						</el-form-item>
					</el-form>
					<div class="flex justify-center">
						<el-button type="primary" @click="submit(form.loginValidity)">保存</el-button>
					</div>
				</div>
			</el-collapse-item>
			<el-collapse-item name="7">
				<template #title>
					<span class="pl-4 text-lg font-semibold text-primary">微信账户绑定/解绑</span>
				</template>
				<div class="px-6">
					<div class="flex items-center">
						<div class="w-[140px] text-right text-tx-regular">微信绑定状态：</div>
						<div class="pl-2">{{ form.wechat.wechatBindingStatus === 20 ? '已绑定' : '未绑定' }}</div>
					</div>
					<div class="flex justify-center" v-if="form.wechat.wechatBindingStatus !== 20">
						<el-button type="primary" disabled>去绑定</el-button>
					</div>
				</div>
			</el-collapse-item>
		</el-collapse>
	</div>
</template>

<script setup lang="ts" name="systemBasicPersonalSettings">
import { cloneDeep } from 'lodash';
import { useMessage } from '/@/hooks/message';
import { getObj, addOrUpdate } from '/@/api/platform/basicPersonalSettings';
import { loginValidityOptions } from './data';
const BMap = defineAsyncComponent(() => import('./components/BMap.vue'));
const activeNames = ref(['1', '2', '3', '4', '5', '6', '7']);
const loading = ref(false);
const form = reactive({
	alarmPop: {
		alarmPopRange: 10,
	},
	mapMode: {
		mapModeSelection: 10,
		centerPointLatitude: null,
		centerPointLongitude: null,
		mapLevel: null,
	},
	placeFormat: {
		userClustersPlaceFormat: [],
	},
	placeBuilding: {
		userClustersPlaceBuilding: null,
	},
	login: {
		loginVerificationCode: 20,
	},
	loginValidity: {
		loginValidityPeriod: null,
	},
	wechat: {
		wechatBindingStatus: 10,
	},
});
const getData = () => {
	getObj().then((res) => {
		form.alarmPop.alarmPopRange = res.data?.alarmPopRange;
		form.placeFormat.userClustersPlaceFormat = res.data?.userClustersPlaceFormat?.split(',') || [];
		form.placeBuilding.userClustersPlaceBuilding = res.data?.userClustersPlaceBuilding;
		form.login.loginVerificationCode = res.data?.loginVerificationCode;
		form.loginValidity.loginValidityPeriod = Number(res.data?.loginValidityPeriod);
		form.wechat.wechatBindingStatus = res.data?.wechatBindingStatus;
		Object.assign(form.mapMode, {
			mapModeSelection: res.data?.mapModeSelection,
			centerPointLatitude: res.data?.centerPointLatitude,
			centerPointLongitude: res.data?.centerPointLongitude,
			mapLevel: res.data?.mapLevel,
		});
	});
};
getData();

// 地图拖拽,缩放 获取中心点和缩放级别
const handleMapZoomAndCenter = ({ center, zoom }) => {
	form.mapMode.centerPointLatitude = center.lat.toFixed(6);
	form.mapMode.centerPointLongitude = center.lng.toFixed(6);
	form.mapMode.mapLevel = zoom;
};
const submit = async (params, paramsTypeToString?) => {
	try {
		loading.value = true;
		const pars = cloneDeep(params);
		if (paramsTypeToString) {
			pars[paramsTypeToString] = pars[paramsTypeToString].join(',');
		}
		await addOrUpdate(pars);
		useMessage().success('修改成功');
		getData();
	} catch (err: any) {
		useMessage().error(err.msg);
	} finally {
		loading.value = false;
	}
};
</script>
<style lang="scss" scoped>
:deep(.el-collapse) {
	border-bottom: unset;
	border-top: unset;
}
:deep(.el-collapse-item) {
	box-shadow: var(--el-box-shadow-light);
	border-left: 1px solid var(--el-border-color);
	border-right: 1px solid var(--el-border-color);
	margin-bottom: 20px;
	border-radius: 12px;
	overflow: hidden;
}
</style>
